const el = new Vue({
    el: "#app",
    data() {
        return {
            msg: "234",
            tableData: [
                {
                    index:1,
                    mc: "网线",
                    dw: '鲲',
                    yjdhsl: 11312,
                    sjdhsl: 1,
                    dj: 30,
                    dhsj: '',
                    yjdhsj: '',
                    sjdhsj: '',
                    bz: '药'
                }],
            menuList: [
                {
                    name: "增加行",
                }
            ],
            rightClickIndex:0,

        }
    },
    methods: {
        addRow(){

            let temp = {
                mc: "网线"+Math.random(),
                dw: '鲲',
                yjdhsl: 1,
                sjdhsl: 1,
                dj: 30,
                dhsj: '',
                yjdhsj: '',
                sjdhsj: '',
                bz: ''
            }
            this.tableData.splice(this.rightClickIndex,0,temp)
            this.paixuIndex(this.tableData);
            this.clickTableRow()
            console.log(this.tableData);
            console.log(this.tableData.map(item => item.index))
        },
        rightMenuClick(row, column, event) {
            // console.log(row, column, event)
            let menu = this.$refs['menu'];
            event.preventDefault();
            // 根据事件对象中鼠标点击的位置，进行定位
            menu.style.left = event.clientX +1+ "px"; // 防止误触。
            menu.style.top = event.clientY + 1+ "px";
            menu.style.display = "block";
            menu.style.opacity = 1;
            menu.style.zIndex = 999;
            this.rightClickIndex = row.index;
        },

        infoClick(index) {
            console.log(index)
            switch (parseInt(index)){
                case 0:
                    this.addRow();
                    break;
            }
        },
        sendData(){
            let x2js = new X2JS();
            var xmlAsStr = x2js.json2xml_str( this.tableData );
            console.log(xmlAsStr)
        },
        paixuIndex(arr){
            if(arr.length){
                arr.map((item,index) => {
                    return item.index = index + 1;
                })
            }else{
                return [];
            }

        },
        clickTableRow(){
            var menu = document.querySelector("#menu");
            menu.style.display = "none";
            menu.style.zIndex = 0;
        },
        pushRowToEnd(){
          let temp = {
            mc: "网线"+Math.random(),
            dw: '鲲',
            yjdhsl: 1,
            sjdhsl: 1,
            dj: 30,
            dhsj: '',
            yjdhsj: '',
            sjdhsj: '',
            bz: ''
          }
          this.tableData.push(temp)
        }
    }
})
